<template>
    <div>
        <!--登录页面-->
        <van-form>
            <van-field label="手机号" placeholder="请输入手机号" v-model="mobile" :rules="[{ required: true, message: '请填写手机号' }]" @blur="send"></van-field>
            <van-button @click="getcode" >

                <van-count-down :time="time" :format="mas" :auto-start="false" ref="countDown" @finish="finish"></van-count-down>

            </van-button>
            
            
            <van-field label="验证码" placeholder="请输入验证码" v-model="code" ></van-field>
            <van-button @click="login">登录</van-button>
        </van-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                mobile:'',
                code:'',
                mas:'点击获取验证码',
                time:30000,
                show:false

            }
        },
        methods: {

            //正则验证手机号是否合法
            send(){
                if(this.mobile == ''){
                    alert('手机号不能为空')
                    return false
                }

                let res = /^1[3-9]\d{9}$/
                if(!res.test(this.mobile)){
                    alert('手机号不合法,请重新输入')
                }
            },
            //获取验证码
            getcode(){
                
                //开启倒计时
                this.$refs.countDown.start();
                this.show=true
                this.mas = '还剩ss秒后重新发送'
                
                //判断手机号为空 和 师傅符合格式
                if(this.mobile == ''){
                    alert('手机号不能为空')
                    return false
                }
                this.$axios.get('/login/login/?mobile='+this.mobile).then(res=>{
                if(res.data.code == 200){
                    this.$toast.success(res.data.msg)
                    
                    
                    
                }else{
                    this.$toast.fail(res.data.msg)
                }
                })

            },
            //前后端对比验证码 对比上登录 
            login(){
                this.send()
                this.$axios.post('/login/login/',{'mobile':this.mobile,'code':this.code}).then(res=>{
                    if(res.data.code == 200){
                        this.$toast.success(res.data.msg)
                        //用户名 和id
                        localStorage.setItem('userid',res.data.userid)
                        localStorage.setItem('mobile',res.data.mobile)
                        //用户权限
                        let reslist = JSON.stringify(res.data.reslist)
                        localStorage.setItem('reslist',reslist)
                        //token 和更新token
                        localStorage.setItem('token',res.data.token)
                        localStorage.setItem('rtoken',res.data.rtoken)
                        this.$router.push('/logindex')
                    }else{
                        this.$toast.fail(res.data.msg)
                    }
                })
            },
            //倒计时结束
            finish(){
                this.$toast.success('倒计时结束');
                //重置倒计时
                this.$refs.countDown.reset()
                //回复如初
                this.mas = '点击获取验证码'
            },

        },
        mounted() {
            
        },
    }
</script>

<style scoped>

</style>